<template>
  <div class="detail-box">
    <p-row>
      <p-col :span="12">
        <div class="row-box">
          <span class="left">客户编号：</span><span class="right">{{ detail.code }}</span>
        </div>
      </p-col>
      <p-col :span="12">
        <div class="row-box">
          <span class="left">当前状态：</span><span class="right">{{ escapeState[detail.currStatus] }}</span>
        </div>
      </p-col>
    </p-row>
    <p-row>
      <p-col :span="12">
        <div class="row-box">
          <span class="left">客户名称：</span><span class="right">{{ detail.customerName }}</span>
        </div>
      </p-col>
      <p-col :span="12">
        <div class="row-box">
          <span class="left">客户简称：</span><span class="right">{{ detail.name }}</span>
        </div>
      </p-col>
    </p-row>
    <p-row>
      <p-col :span="12">
        <div class="row-box">
          <span class="left">客户分类：</span>
          <span class="right">{{ escapeCustomerType[detail.classificationCode] }}</span>
        </div>
      </p-col>
      <p-col :span="12">
        <div class="row-box">
          <span class="left">销售组织：</span>
          <span class="right">{{ escapeSalesOrgCode[detail.salesOrgCode] }}</span>
        </div>
      </p-col>
    </p-row>
    <p-row>
      <p-col :span="12">
        <div class="row-box">
          <span class="left">销售组：</span><span class="right">{{ getVal(detail.salesGroupCode) }}</span>
        </div>
      </p-col>
      <p-col :span="12">
        <div class="row-box">
          <span class="left">KAPM组：</span><span class="right">{{ getVal(detail.pmGroupCode) }}</span>
        </div>
      </p-col>
    </p-row>
    <p-row>
      <p-col :span="12">
        <div class="row-box">
          <span class="left">国家：</span><span class="right">{{ detail.country }}</span>
        </div>
      </p-col>
      <p-col :span="12">
        <div class="row-box">
          <span class="left">省：</span><span class="right">{{ detail.province }}</span>
        </div>
      </p-col>
    </p-row>
    <p-row>
      <p-col :span="12">
        <div class="row-box">
          <span class="left">城市：</span><span class="right">{{ detail.city }}</span>
        </div>
      </p-col>
      <p-col :span="12">
        <div class="row-box">
          <span class="left">区域：</span><span class="right">{{ customerArea[detail.area] }}</span>
        </div>
      </p-col>
    </p-row>
    <p-row>
      <p-col :span="24">
        <div class="row-box">
          <span class="left">详细地址：</span><span class="right">{{ detail.address }}</span>
        </div>
      </p-col>
    </p-row>
    <p-row>
      <p-col :span="24">
        <div class="row-box">
          <span class="left">网站地址：</span><span class="right">{{ detail.website }}</span>
        </div>
      </p-col>
    </p-row>
    <p-row>
      <p-col :span="24">
        <div class="row-box">
          <span class="left">备注：</span><span class="right">{{ detail.remark }}</span>
        </div>
      </p-col>
    </p-row>
    <p-row>
      <p-col :span="12">
        <div class="row-box">
          <span class="left">创建人：</span><span class="right">{{ detail.createUserName }}</span>
        </div>
      </p-col>
      <p-col :span="12">
        <div class="row-box">
          <span class="left">创建时间：</span><span class="right">{{ detail.createTime }}</span>
        </div>
      </p-col>
    </p-row>
    <p-row>
      <p-col :span="12">
        <div class="row-box">
          <span class="left">创建人部门：</span><span class="right">{{ detail.createDeptName }}</span>
        </div>
      </p-col>
      <p-col v-if="!showCustomerCreate" :span="12">
        <div class="row-box">
          <span class="left">修改人时间：</span><span class="right">{{ detail.updateTime }}</span>
        </div>
      </p-col>
    </p-row>
    <p-row v-if="!showCustomerCreate">
      <p-col :span="12">
        <div class="row-box">
          <span class="left">修改人：</span><span class="right">{{ detail.updateUserName }}</span>
        </div>
      </p-col>
      <p-col :span="12">
        <div class="row-box">
          <span class="left">修改人部门：</span><span class="right">{{ detail.updateDeptName }}</span>
        </div>
      </p-col>
    </p-row>
  </div>
</template>

<script>
export default {
  props: {
    detail: {
      type: Object,
      default: () => {},
    },
  },
  computed: {
    showCustomerCreate() {
      const route = ['/customer-creation']
      return route.includes(this.$router.currentRoute.fullPath);
    },
    escapeState() {
      return this.$store.state.dictionary.dict['state'] || {};
    },
    escapeSalesOrgCode() {
      return this.$store.getters.getOrg({
        code: 'ltcsmsizebu',
        isDict: true,
      }) || {};
    },
    escapeCustomerType() {
      return this.$store.state.dictionary.dict['customer_type'] || {};
    },
    customerArea() {
      return this.$store.state.dictionary.dict['customer_area'] || {};
    },
    getltcoledList() {
      const list1 = this.$store.getters.getOrg({
        code: 'ltcorgoled',
        type: 'sales',
        isDict: true,
      });
      const list2 = this.$store.getters.getOrg({
        code: 'ltcorgltps',
        type: 'sales',
        isDict: true,
      });
      const list3 = this.$store.getters.getOrg({
        code: 'ltcorgoled',
        type: 'kapm',
        isDict: true,
      });
      const list4 = this.$store.getters.getOrg({
        code: 'ltcorgltps',
        type: 'kapm',
        isDict: true,
      });
      return { ...list1, ...list2, ...list3, ...list4 };
    },
  },
  methods: {
    getVal(value) {
      if (!value) {
        return;
      }
      value = value && value?.split(',');
      let data = this.getltcoledList || {};
      let info = value?.map(item => {
        return data[item];
      });
      return info?.join('，');
    },
  },
};
</script>
<style lang="less" scoped>
.detail-box {
  width: 100%;
  padding: 0 20px;
  .row-box {
    width: 100%;
    display: flex;
    justify-content: space-between;
    margin-bottom: 21px;
    font-size: 12px;
    color: #222;
    .left {
      width: 80px;
      // flex: 1;
      margin-right: 20px;
    }
    .right {
      width: calc(100% - 80px);
      flex: 6;
    }
  }
}
</style>
